<template>
  <div class="box">
    <div class="head">
      <div class="img">
        <img
          v-if="commentData.user.head_img"
          :src="$axios.defaults.baseURL + commentData.user.head_img"
          alt=""
        />
        <img v-else src="../../images/tujianmai.jpg" alt="" />
      </div>
      <div class="nickname">
        <div>{{ commentData.user.nickname }}</div>
        <span>2小时前</span>
      </div>
      <p @click="handleClick">回复</p>
    </div>

    <div class="maincomment">
      <CommentParent
        :parentData="commentData.parent"
        v-if="commentData.parent"
      />

      {{ commentData.content }}
    </div>
  </div>
</template>

<script>
import CommentParent from "./parent";
import eventBus from "../../utils/eventBus";
export default {
  components: {
    CommentParent,
  },
  methods: {
    handleClick() {
      console.log(eventBus);
      eventBus.$emit("callReply", this.commentData.id);
    },
  },

  props: ["commentData"],
};
</script>

<style lang="less" scoped>
.box {
  border-bottom: 1px solid #e4e4e4;

  .head {
    display: flex;
    padding: 20/360 * 100vw;

    .img {
      img {
        width: 35/360 * 100vw;
        height: 35/360 * 100vw;
        border-radius: 50%;
      }
    }
    .nickname {
      flex: 1;
      padding-left: 8/360 * 100vw;
      span {
        font-size: 12/360 * 100vw;
        color: #888;
      }
    }
    p {
      font-size: 14/360 * 100vw;
      color: #888;
    }
  }
  .maincomment {
    padding: 20/360 * 100vw;
  }
}
</style>
